<template>
  <div class="wrap">
    <div class="audio_spectrum_wrap">
      <template v-for="(audioSpectrum, index) in audioSpectrums">
        <div :class="['icon_music', music_move(index), {'m': audioIsPlaying}]" >
          <span :class="['m1', {'m': audioIsPlaying}]"></span>
          <span :class="['m2', {'m': audioIsPlaying}]"></span>
          <span :class="['m3', {'m': audioIsPlaying}]"></span>
        </div>
      </template>
    </div>
  </div>
</template>

<script >
export default {
  props: {
    audioIsPlaying: {
      type: Boolean,
      default: false
    }
  },
  name: 'hello',
  data () {
    return {
      audioSpectrums: Array(15)
    }
  },
  methods: {
    music_move(index) {
      return `music_move_${index}`
    }
  }
}
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  position: absolute;
  top: -30px;
  left: 0;
}
.audio_spectrum_wrap {
  padding: 0 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 100%;
  height: 80px;
  background-color: transparent;
}
.icon_music {
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: transparent;
  display: flex;
  align-items:flex-end;
  span {
    display: inline-block;
    width: 4px;
    background-color: #e4e8f1;
    animation: move 2s infinite alternate;
    border-radius: 2px 2px 0px 0px;
    animation-play-state: paused;
  }
  .m1 {
    height: 6px;
  }
  .m2 {
    margin: 0 2px;
    height: 10px;
    animation-delay: -0.15s;
  }
  .m3 {
    height: 15px;
    animation-delay: -0.5s;
  }
}
@keyframes move {
  0% {
    height: 30%;
  }
  30%, 80% {
    height: 70%;
  }
  60% {
    height: 40%;
  }
  100% {
    height: 50%;
  }
}
.m {
  animation-play-state: running!important;
}

.animation(@count) {
    animation: music_move_animation 10s infinite alternate;
    animation-delay: -@count*2s;
    animation-play-state: paused;
}

.loop(@count) when (@count >=0) {
  &_@{count} {
    .animation(@count);
  }
  .loop((@count - 1));
}
.music_move{
  .loop(14);
}
@keyframes music_move_animation {
  6.66% {
    height: 35%;
  }
  13.2% {
    height: 40%;
  }
  19.9% {
    height: 50%;
  }
  20.5% {
    height: 40%;
  }
  26.6% {
    height: 60%;
  }
  33.3% {
    height: 30%;
  }
  39.9% {
    height: 50%;
  }
  46.6% {
    height: 30%;
  }
  53.32% {
    height: 50%;
  }
  60% {
    height: 60%;
  }
  66.6% {
    height: 100%;
  }
  73.3% {
    height: 50%;
  }
  79.9% {
    height: 30%;
  }
  86.6% {
    height: 40%;
  }
  93.3% {
    height: 35%;
  }
  100% {
    height: 30%;
  }
}

</style>
